
import { Card, Flex } from "@/components/base";
import { Typography } from "@/components/typography";
import styles from './index.module.less';
import { BarChartOutlined } from "@ant-design/icons";

const { Text } = Typography;

/** 服务统计 */
export function Statistics() {
    return (
        <Card >
            <Text size={18} strong style={{ marginBottom: 12, display: 'block', alignItems: 'center' }}>
                <BarChartOutlined style={{ marginRight: 8 }} />
                服务统计
            </Text>
            <Flex className={styles['statistics-container']} align="center">
                <Flex vertical align="center" >
                    <Text strong style={{ color: '#1890ff' }}>**</Text>
                    <Text size={12} type='secondary' >使用次数</Text>
                </Flex>
                <Flex vertical align="center">
                    <Text strong style={{ color: '#52c41a' }} >￥***.**</Text>
                    <Text size={12} type='secondary' >累计收入</Text>
                </Flex>
                <Flex vertical align="center">
                    <Text strong style={{ color: '#722ed1' }} >￥**.**</Text>
                    <Text size={12} type='secondary' >评价价格</Text>
                </Flex>
            </Flex>
            <Flex justify='space-between' style={{ marginTop: 16 }}>
                <Text size={12} type='secondary' style={{ textAlign: 'left' }} >创建时间：0000-00-00</Text>
                <Text size={12} type='secondary' style={{ textAlign: 'right' }} >最后使用：0000-00-00</Text>
            </Flex>
        </Card>
    )
}